<!--<style lang="scss">-->

<!--</style>-->

<!--<template>-->
<!--  <div class="page-home">-->
<!--    <z-space vertical> 当前选中的ID-->
<!--      <div v-if="state.current">{{state.current.id}}</div>-->
<!--    </z-space>-->
<!--    <z-space vertical>-->
<!--      <z-search-table :sequence="false" :radioable="true" :def="dataTable"-->
<!--      @cur-radio-change="onRadioChange"-->
<!--      >-->
<!--        <template #table__action="scope">-->
<!--          <template v-if="scope.id === 'slot'">-->
<!--            <el-button type="text">-->
<!--              自定义操作按钮-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </template>-->
<!--      </z-search-table>-->
<!--      <vue-code-mirror :tpl="def.tpl" :js="def.js"></vue-code-mirror>-->

<!--      <h3>ZSearchTable 参数</h3>-->
<!--      <doc-props :data="doc.props"></doc-props>-->
<!--    </z-space>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import {useDataTable} from "@/zpkgs/hooks/datatable";-->
<!--import VueCodeMirror from "@example/components/VueCodeMirror";-->
<!--import DocProps from "@example/plugins/example/components/DocProps";-->

<!--export default {-->
<!--  components: {DocProps, VueCodeMirror},-->
<!--  data() {-->
<!--    return {-->
<!--      doc: {-->
<!--        props: [-->
<!--          {-->
<!--            name: 'autoInit',-->
<!--            type: 'Boolean',-->
<!--            defVal: 'true',-->
<!--            desc: '默认自动加载数据'-->
<!--          },-->
<!--          {-->
<!--            name: 'onInit',-->
<!--            type: 'Function',-->
<!--            defVal: 'null',-->
<!--            desc: '用户初始化后回调'-->
<!--          }-->
<!--        ]-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  setup(props, ctx) {-->

<!--    const { reactive } = vueCompositionAPI-->

<!--    function init() {-->
<!--      return useDataTable({-->
<!--        defaultUrl: '/api/list',-->
<!--        request: globalThis.Req,-->
<!--        columnDefMap: {-->
<!--          sourceDbName: {-->
<!--            // search: {-->
<!--            //   type: 'string',-->
<!--            //   ui: { widget: 'CusInput' },-->
<!--            // },-->
<!--            formatter(row, column, cellValue) {-->
<!--              return cellValue +'x';-->
<!--            }-->
<!--          }-->
<!--        },-->
<!--        appendColumns: [-->
<!--          {-->
<!--            width: 180,-->
<!--            label: '操作',-->
<!--            actions: [-->
<!--              {-->
<!--                id: 'detail',-->
<!--                text: '详情',-->
<!--                click: function () {}-->
<!--              },-->
<!--              {-->
<!--                id: 'slot',-->
<!--                useSlot: true-->
<!--              }-->
<!--            ]-->
<!--          }-->
<!--        ],-->
<!--        search: {-->
<!--          slots: {-->
<!--            object_beforeend: `-->
<!--  <z-space  column-gap="3px"  style="margin-left: 10px;">-->
<!--    <el-button @click="zform__callEvent('form-submit', scope, $event)"">搜索</el-button>-->
<!--   <el-button @click="zform__reset(scope, $event)"">重置</el-button>-->
<!--  </z-space>-->
<!--  `-->
<!--          },-->
<!--        }-->
<!--      });-->
<!--    }-->


<!--    // let js = init.toString().replace(`function init()`, '')-->

<!--    let def = {-->
<!--      tpl: `<template>-->
<!--   <search-table :def="dataTable"></search-table>-->
<!--</template>`,-->
<!--      js: `-->
<!--return useDataTable({-->
<!--  defaultUrl: '/api/list',-->
<!--  request: globalThis.Req,-->
<!--  columnDefMap: {-->
<!--    sourceDbName: {-->
<!--      formatter(row, column, cellValue) {-->
<!--        return cellValue ;-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  search: {-->
<!--    slots: {-->
<!--      object_beforeend: \`-->
<!--<z-space style="margin-left: 10px;">-->
<!--<el-button @click="zform__callEvent('form-submit', scope, $event)"">搜索</el-button>-->
<!--</z-space>-->
<!--\`-->
<!--    },-->
<!--  }-->
<!--});-->
<!--    `-->
<!--    }-->

<!--    let dataTable = init();-->

<!--    let state = reactive({-->
<!--      current: null-->
<!--    })-->

<!--    function onRadioChange(e) {-->
<!--      console.log('onRadioChange', e)-->
<!--      state.current = e.row-->
<!--    }-->

<!--    return {-->
<!--      def,-->
<!--      state,-->
<!--      onRadioChange,-->
<!--      dataTable-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
